<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
		  <u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view v-show="!loadingone">
			<navbar name="报告详情"></navbar>
			<view class="contrast">
				<view class="materials-title">
				</view>
				<view class="materials-title2">
					<image class="report" src="http://static.bsyjk.cn/reporticon/037F7DDF02E44EA0B9FABCE2AF9A7747.png"
						mode="报告"></image>
					<view class="report-center">
						<view class="title">
							北京儿童医院
						</view>
						体检时间：2021-03-29
					</view>
					<view class="abnormal">
						<switch checked style="transform:scale(0.7);position: relative;top:-14upx;left: 12upx;"
							color="#2EA7E0" />
						<view style="float: left;">
							只看异常
						</view>
					</view>
				</view>
				<!-- end -->
				<block v-for="(item,idx) in basic" :key="idx">
					<view class="weui-flex materia">
						<view class="flex-title">
							{{item.tl}}
						</view>
						<view class="flex-num">
							<view class="title" :style="item.isred?'color: #F56767;':''">
								{{item.price}}
							</view>
							{{item.content}}
						</view>
					</view>
					<u-line v-show="basic.length -1!=idx" />
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLine from "@/uview-ui/components/u-line/u-line.vue"

	export default {
		components: {
			uLoading,
			uLine,
		},
		data() {
			return {
				loadingone:false,//懒加载
				basic: [{
						tl: '低压',
						price: '105mmHg',
						content: '参考范围：(75-110mmHg）',
						isred: false
					},
					{
						tl: '低压',
						price: '105mmHg',
						content: '参考范围：(75-110mmHg）',
						isred: true
					},
					{
						tl: '低压',
						price: '105mmHg',
						content: '参考范围：(75-110mmHg）',
						isred: false
					},
					{
						tl: '低压',
						price: '105mmHg',
						content: '参考范围：(75-110mmHg）',
						isred: false
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.contrast {
		width: 702upx;
		margin: 30upx auto 0;
		background: #fff;
		border-radius: 20upx;
	}

	.materials-title {
		height: 181upx;
		line-height: 90upx;
		padding: 0 20upx;
		background: linear-gradient(112deg, #81C042 0%, #2EA7E0 100%);
		opacity: 0.23;
		border-radius: 25upx 25upx 0 0;
	}

	.materials-title2 {
		display: flex;
		width: 702upx;
		height: 181upx;
		margin: -181upx 0 0;

		.report {
			width: 50upx;
			height: 50upx;
			display: block;
			margin: 66upx 20upx 0 32upx;
		}

		.report-center {
			width: 460upx;
			font-size: 24upx;
			font-weight: 400;
			color: #333333;
			line-height: 33upx;
			padding-top: 38upx;

			.title {
				font-size: 34upx;
				font-weight: 400;
				color: #333333;
				line-height: 52upx;
			}
		}
	}

	.materia {
		height: 130upx;
		padding: 0 20upx;
		line-height: 130upx;

		.flex-title {
			width: 40%;
			font-size: 34upx;
			font-weight: 400;
			color: #333333;
		}

		.flex-num {
			width: 59%;
			font-size: 24upx;
			font-weight: 400;
			color: #9B9B9B;
			line-height: 33px;
			text-align: right;

			.title {
				font-size: 30upx;
				font-weight: 500;
				color: #333333;
				line-height: 30upx;
				padding-top: 20upx;
			}
		}
	}

	.abnormal {
		width: 120upx;
		text-align: right;
		padding-top: 34upx;
		font-size: 30upx;
		font-weight: 500;
		color: #2EA7E0;
		line-height: 42upx;
	}
</style>
